:root {

    --primary-color: #096DD9;
    --secondary-color: #13C2C2;
}

/* 卡片 */
#head {
    width: 100%;
    height: 2.5rem;
    background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
    color: #fff;
    font-size: 0.3rem;
    padding-top: 0.5rem;
}

#head h4 {
    font-size: 0.4rem;
    padding-left: 0.5rem;
    margin-bottom: 0.3rem;
}

#head p {
    margin-bottom: 0.3rem;
    padding-left: 0.5rem;
}

#head button {
    width: 6.5rem;
    height: 0.8rem;
    color: var(--primary-color);
    background-color: #fff;
    border-radius: 0.5rem;
    border: none;
    display: block;
    margin: auto;
    font-size: 0.3rem;
}

/* 编辑卡片 */

#opc {
    display: flex;
    padding: 0.2rem;
    justify-content: space-between;
}

#opc p {
    font-size: 0.4rem;
}

#opc span {
    font-size: 0.3rem;
    color: var(--primary-color);
    cursor: pointer;
}

/* 卡片 */
#box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#box .card {
    width: 7rem;
    height: 2.5rem;
    /* background-color: #13C2C2; */
    margin-bottom: 0.2rem;
    border-radius: 0.2rem;
    border: 1px #AAA solid;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    padding: 0.1rem;

}

#box .card:active {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}